<template>
	<view class="box">
		<view class="bg">
			<view class="small-title">加入蜜袋互助</view>
		</view>
		<view class="top-info" v-if="userInfo">
			<image src="../../static/image/home-son.png" mode="" class="head-pic"></image>
			<view class="join-person flex flai fljc">
				<view class="">
					<text >{{userInfo.fullName}}</text>
					<text class="line"></text> <text>已加入蜜袋互助</text>
				</view>
				
			</view>
			<view class="person-num flex flai fljc">
				<text>{{userInfo.relationName}}</text>
				<text>等</text>
				<text class="wait-num">{{num}}人待实名认证</text>
			</view>
			<view class="prompt">认证后35万互助金权益即刻生效</view>
			<view class="atonce" @click="nextPage">立即认证，激活权益</view>
		</view>
		<view class="get-info flex flai fljcsb">
			<view class="">
				<view class="home-number">您已为<text>{{joinNum}}位家人</text>领取权益</view>
				<view class="self">本人</view>

			</view>
			<view class="invite" @click="addHome">为更多家人领取</view>
		</view>
		<view class="my-advantage">
			<view class="my-title">我们有何不同</view>
			<image src="../../static/image/index_15.png"></image>
		</view>
	</view>
</template>

<script>
	import api from '../../api/index.js'
	import {
		relationTypeDeal
	} from '../../static/common.js'
	export default {
		data() {
			return {
				num: 0,
				joinNum: 0,
				userInfo: {}
			}
		},
		onLoad(opt) {
			this.getlistByPlan(opt.planId)
			this.notActived()
			this.hasJoindActived()
		},
		methods: {
			//获取最近一个激活和最近一个未激活的人员
			getlistByPlan(id) {
				api.myHelp.getNoActiveInfo({
					id: id
				}).then(res => {
					if (res.code == 1) {
						this.userInfo = res.data
					}
				})

			},
			// 已加入保障人数
			hasJoindActived() {
				api.joinHellp.hasJoindActived().then(res => {
					if (res.code == 1) {
						this.joinNum = res.data
					}
				})
			},
			//获取当前用户未激活人数
			notActived() {
				api.joinHellp.notActived().then(res => {
					if (res.code == 1) {
						this.num = res.data
					}
				})
			},
			// 去激活保障页面
			nextPage() {
				uni.navigateTo({
					url: '/pages/guarantee/guarantee'
				});
			},
			// 返回加入互助页面
			addHome() {
				uni.switchTab({
					url: '/pages/joinPage/joinPage'
				});
			}
		}
	}
</script>

<style>
	@import "../../static/css/common.css";

	.bg {
		width: 100%;
		height: 350rpx;
		background: url(../../static/image/noneActive.png);
	}

	.small-title {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		padding-top: 30rpx;
	}

	.box {
		position: relative;
		background: #F7F7F7;
		height: 100%;
	}



	.top-info {
		position: absolute;
		width: 670rpx;
		background: #FFFAEF;
		box-shadow: 0px 10rpx 20rpx 0px rgba(0, 0, 0, 0.05);
		border-radius: 30rpx;
		padding-bottom: 60rpx;
		margin: 0 auto;
		left: 40rpx;
		top: 160rpx;

	}

	.head-pic {
		width: 120rpx;
		height: 120rpx;
		border-radius: 100%;
		position: absolute;
		top: -60rpx;
		left: 50%;
		margin-left: -60rpx;
	}

	.join-person {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(17, 17, 17, 1);
		margin-top: 60rpx;
		text-align: center;
	}

	.line {
		width: 4rpx;
		height: 25rpx;
		background: rgba(17, 17, 17, 1);
		display: inline-block;
		margin: 0 8rpx;
	}

	.person-num {
		text-align: center;
		margin-top: 40rpx;
	}

	.person-num text {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 800;

	}

	.person-num text:nth-child(1) {
		color: rgba(17, 17, 17, 1);
	}

	.wait-num {
		color: #66BE00;
	}

	.prompt {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: rgba(17, 17, 17, 1);
		text-align: center;
		margin-top: 20rpx;
	}

	.atonce {
		width: 590rpx;
		height: 118rpx;
		background-size: cover;
		margin-top: 40rpx;
		margin-left: 40rpx;
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		line-height: 118rpx;
		background: linear-gradient(0deg, rgba(101, 189, 0, 1), rgba(161, 244, 0, 1));
		border-radius: 60rpx;
	}

	.atonce:active {
		opacity: 0.8;
	}

	.get-info {
		background: #fff;
		height: 194rpx;
		margin-top: 314rpx;

	}

	.invite {
		width: 239rpx;
		height: 60rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 254, 254, 1);
		line-height: 60rpx;
		text-align: center;
		margin: 40rpx;
		background: linear-gradient(0deg, rgba(101, 189, 0, 1), rgba(161, 244, 0, 1));
		border-radius: 30rpx;
	}

	.invite:active {
		opacity: 0.7;
	}

	.home-number {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: rgba(17, 17, 17, 1);
		margin-top: 30rpx;
		margin-left: 40rpx;
	}

	.home-number text {
		color: #66BF00;
	}

	.self {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: rgba(165, 165, 173, 1);
		margin-left: 40rpx;
	}

	.my-advantage {
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		margin-top: 30rpx;
		text-align: center;
		margin-bottom: 120rpx;
	}

	.my-advantage image {
		width:670rpx;
		height:1070rpx;
		border-radius:30rpx 0rpx 0rpx 30rpx;
	}

	.my-title {
		text-align: left;
		margin-left: 40rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(0, 0, 0, 1);
		margin-bottom: 20rpx;
	}
</style>
